<template>
  <div>
    <div class="editor" ref="editor" :style="styles"></div>
  </div>
</template>

<script>
import axios from "axios"
import Quill from "quill"
import "quill/dist/quill.core.css"
import "quill/dist/quill.snow.css"
import "quill/dist/quill.bubble.css"
import { getToken } from "@/utils/auth"

export default {
  name: "Editor",
  props: {
    value: { type: String, default: "" },
    height: { type: Number, default: null },
    minHeight: { type: Number, default: null },
    readOnly: { type: Boolean, default: false },
    fileSize: { type: Number, default: 5 },
    type: { type: String, default: "url" },
    placeholder: { type: String, default: "请输入内容" },
    extraOptions: { type: Object, default: () => ({}) }
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/system/oss/file/upload",
      headers: { Authorization: "Bearer " + getToken() },
      Quill: null,
      currentValue: ""
    }
  },
  computed: {
    styles() {
      const style = {}
      if (this.minHeight) style.minHeight = `${this.minHeight}px`
      if (this.height) style.height = `${this.height}px`
      return style
    },
    finalOptions() {
      const { modules, formats, ...otherExtra } = this.extraOptions
      const coreOptions = {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ["clean"]
          ]
        },
        placeholder: this.placeholder,
        readOnly: this.readOnly,
        sanitize: false,
        preserveWhitespace: true,
        formats: [
          "bold", "italic", "underline", "strike",
          "list", "bullet", "ordered",
          "size", "color", "background",
          "align", "html"
        ]
      }
      return { ...coreOptions, ...otherExtra }
    }
  },
  watch: {
    value: {
      handler(val) {
        const newVal = val === null ? "" : val
        if (newVal !== this.currentValue && this.Quill) {
          this.currentValue = newVal
          this.Quill.clipboard.dangerouslyPasteHTML(newVal)
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      const editorDom = this.$refs.editor
      if (!editorDom) return

      this.Quill = new Quill(editorDom, this.finalOptions)

      this.Quill.clipboard.dangerouslyPasteHTML(this.currentValue)
      this.Quill.on("text-change", (delta, oldDelta, source) => {
        if (source === "user") {
          this.currentValue = this.Quill.root.innerHTML
          this.$emit("input", this.currentValue)
          this.$emit("change", this.currentValue)
        }
      })
    },


    getFullHtml() {
      return this.Quill ? this.Quill.root.innerHTML : this.currentValue
    },

    setFullHtml(html) {
      this.currentValue = html || ""
      if (this.Quill) {
        this.Quill.clipboard.dangerouslyPasteHTML(this.currentValue)
      }
    }
  }
}
</script>

<style scoped>
.editor {
  width: 100%;
  box-sizing: border-box;
}

::v-deep .ql-container {
  border: none !important;
  box-shadow: none !important;
}

::v-deep .ql-toolbar {
  border: none !important;
  border-bottom: 1px solid #e6e6e6 !important;
  box-shadow: none !important;
  padding: 4px 8px !important; /* 缩小工具栏内边距 */
}

::v-deep .ql-editor {
  min-height: inherit !important;
  height: inherit !important;
  line-height: 1.7 !important;
  font-size: 14px !important;
}

/* 默认按钮样式优化（缩小尺寸） */
::v-deep .ql-toolbar .ql-formats {
  margin-right: 8px !important; /* 减小按钮组间距 */
}
::v-deep .ql-toolbar button {
  width: 28px !important;
  height: 28px !important;
  padding: 4px !important; /* 缩小按钮内边距 */
  font-size: 14px !important; /* 缩小图标字体大小 */
}
::v-deep .ql-toolbar .ql-picker-label {
  padding: 4px 8px !important; /* 缩小下拉框内边距 */
  font-size: 13px !important;
  height: 28px !important;
}
::v-deep .ql-toolbar .ql-picker-item {
  font-size: 13px !important;
  padding: 4px 8px !important;
}

/* 小屏幕（笔记本）适配（屏幕宽度≤1440px时生效） */
@media screen and (max-width: 1440px) {
  ::v-deep .ql-toolbar {
    padding: 2px 4px !important;
  }
  ::v-deep .ql-toolbar .ql-formats {
    margin-right: 4px !important;
  }
  ::v-deep .ql-toolbar button {
    width: 24px !important;
    height: 24px !important;
    padding: 2px !important;
    font-size: 12px !important;
  }
  ::v-deep .ql-toolbar .ql-picker-label {
    padding: 2px 6px !important;
    font-size: 12px !important;
    height: 24px !important;
  }
  ::v-deep .ql-toolbar .ql-picker-item {
    font-size: 12px !important;
    padding: 2px 6px !important;
  }
}

/* 更小屏幕（≤1366px，常见笔记本分辨率）进一步优化 */
@media screen and (max-width: 1366px) {
  ::v-deep .ql-toolbar .ql-formats {
    margin-right: 2px !important;
  }
  ::v-deep .ql-toolbar button {
    width: 22px !important;
    height: 22px !important;
  }
  ::v-deep .ql-toolbar .ql-picker-label {
    padding: 2px 4px !important;
  }
}

::v-deep .ql-editor .ql-size-small { font-size: 12px !important; }
::v-deep .ql-editor .ql-size-large { font-size: 18px !important; }
::v-deep .ql-editor .ql-size-huge { font-size: 24px !important; }

::v-deep .ql-editor h1 { font-size: 24px !important; font-weight: 600 !important; margin: 16px 0 !important; }
::v-deep .ql-editor h2 { font-size: 20px !important; font-weight: 600 !important; margin: 14px 0 !important; }
::v-deep .ql-editor h3 { font-size: 18px !important; font-weight: 600 !important; margin: 12px 0 !important; }

::v-deep .ql-editor blockquote {
  border-left: 4px solid #ccc !important;
  padding-left: 12px !important;
  color: #666 !important;
  margin: 8px 0 !important;
}

::v-deep .ql-editor ul,
::v-deep .ql-editor ol {
  padding-left: 24px !important;
  margin: 8px 0 !important;
}

::v-deep .ql-editor.ql-blank::before {
  color: #999 !important;
  font-style: normal !important;
  left: 15px !important;
  font-size: 14px !important;
}
</style>

<style>
.ql-snow .ql-tooltip[data-mode="link"]::before { content: "请输入链接地址:" !important; }
.ql-snow .ql-tooltip { z-index: 9999 !important; }

/* 全局工具栏下拉框适配（避免小屏幕溢出） */
@media screen and (max-width: 1440px) {
  .ql-snow .ql-picker-options {
    font-size: 12px !important;
  }
  .ql-snow .ql-picker-options .ql-picker-item {
    padding: 4px 8px !important;
  }
}
</style>